<template>
    <div class="custom-dropdown">
        <div 
            class="dropdown-trigger"
            @click="handleClick"
            :class="{ 'is-open': props.isOpen }">
            <span class="selected-label">Pick a template</span>
            <el-icon class="arrow-icon"><ArrowDown /></el-icon>
        </div>

        <transition name="dropdown">
            <div v-if="props.isOpen" class="dropdown-menu">
                <slot />
            </div>
        </transition>
    </div>
</template>

<script setup lang="ts">

const props = defineProps(['isOpen'])
const emit = defineEmits(['update:isOpen'])

import { reactive, ref, computed, onMounted, onUnmounted } from 'vue'
import { Close, ArrowDown } from '@element-plus/icons-vue'

function handleClick() {
    emit('update:isOpen', !props.isOpen);
}


function handleClickOutside(event: MouseEvent) {
    const dropdown = document.querySelector('.custom-dropdown');
    if (dropdown && !dropdown.contains(event.target as Node)) {
        emit('update:isOpen', false);
    }
}

onMounted(() => {
    document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
    document.removeEventListener('click', handleClickOutside);
});

</script>

<style lang="scss" scoped>
.custom-dropdown {
    display: inline-block;
    position: relative;
    width: 240px;
    margin-left: 1em;
    
    .dropdown-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 15px;
        background: #fff;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        
        &:hover {
            border-color: #c0c4cc;
        }
        
        &.is-open {
            border-color: var(--el-color-primary);
            
            .arrow-icon {
                transform: rotate(180deg);
            }
        }
        
        .selected-label {
            flex: 1;
            color: #606266;
            font-size: 14px;
        }
        
        .arrow-icon {
            color: #c0c4cc;
            font-size: 14px;
            transition: transform 0.3s;
        }
    }
    
    .dropdown-menu {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        z-index: 2000;
        max-height: 200px;
        overflow-y: auto;
        
    }
}

.dropdown-enter-active,
.dropdown-leave-active {
    transition: all 0.3s;
}

.dropdown-enter-from,
.dropdown-leave-to {
    opacity: 0;
    transform: translateY(-10px);
}
</style>

